<template>
  <div class="home-featured">
    <!-- 加载中 -->
    <div v-if="pending" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div v-for="i in 6" :key="i" class="card animate-pulse">
        <div class="h-48 bg-gray-200 mb-4"></div>
        <div class="h-4 bg-gray-200 mb-2"></div>
        <div class="h-4 bg-gray-200 w-3/4"></div>
      </div>
    </div>
    
    <!-- 产品列表 -->
    <div v-else-if="products?.length" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <ProductCard
        v-for="product in products"
        :key="product.id"
        :product="product"
      />
    </div>
    
    <!-- 空状态 -->
    <div v-else class="text-center py-12 text-gray-500">
      暂无推荐项目
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Product } from '~/types'

// 使用 transform 提取数据
const { data: products, pending } = await useFetch<Product[]>('/api/products/featured', {
  params: { limit: 6 },
  transform: (response: any) => response?.data?.items || []
})
</script>